<template>
  <div class="article-page page-main">
    <search-form :model="searchParams" @search="search">
      <a-form-item label="文章分类：" name="prop">
        <a-select v-model:value="searchParams.cid" filterable placeholder="请选择" class="selWidth" clearable
          @change="search(false)">
          <a-select-option v-for="item in category" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="关键词：" name="keywords">
        <a-input v-model:value="searchParams.keywords" placeholder="请输入" />
      </a-form-item>
    </search-form>
    <div class="table-toolbar">
      <add-button @click="add()" />
    </div>
    <g-table ref="tableRef" :columns="columns" :api="getPageList" :params="searchParams" />
  </div>
</template>

<script setup lang="tsx">
import { articleDel, getPageList } from "./api";
import type { Iarticle } from "./entity";
import type { IClassify } from "@/types/mall";

const searchParams = reactive({
  keywords: "",
  cid: "",
});
let category = $ref<IClassify[]>();
let visible = $ref(false);

const { tableRef, columns, search } = useTable<Iarticle>([
  { title: "标题", dataIndex: "title" },
  { title: "文章分类", dataIndex: "cid" },
  { title: "浏览量", dataIndex: "visit" },
  { title: "文章作者", dataIndex: "author" },
  { title: "文章简介", dataIndex: "synopsis" },

  { title: "更新时间", dataIndex: "update_time" },
  {
    title: "操作",
    dataIndex: "op",
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => add(record)}>编辑</table-button>
        <confirm-button danger onClick={() => remove(record)}>
          删除
        </confirm-button>
      </>
    ),
  },
]);

let activeRow = $ref<Partial<Iarticle>>({});
const router = useRouter();
function add(row: Partial<Iarticle> = {}) {
  router.push({ path: `/content/articleCreat`, query: { id: row.id } });
}

function remove({ id }: Iarticle) {
  articleDel(id as number).then(() => {
    AntMessage.success("已删除");
    search(false);
  });
}
</script>

<style lang="scss"></style>
